<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档编辑 - 多文档管理</title>
    <!-- 引入 Font Awesome 字体图标库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            max-width: 100%;
            padding: 20px;
            padding-bottom: 160px;
            /* 为底部固定区域和文档管理模态框留出空间 */
            box-sizing: border-box;
        }

        .content-box {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        .mr-2 {
            margin-right: 8px;
        }

        .editor-container {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        /* 优化标题输入框样式 */
        .title-container {
            position: relative;
            margin-bottom: 25px;
        }

        .title-input {
            width: 100%;
            padding: 18px 12px;
            border: none;
            border-bottom: 2px solid #ddd;
            font-size: 24px;
            font-weight: 600;
            outline: none;
            transition: border-color 0.3s;
            box-sizing: border-box;
            resize: none;
            overflow: hidden;
            height: 54px;
        }

        .title-input:focus {
            border-color: #4285f4;
        }

        .title-input::placeholder {
            color: #aaa;
            font-weight: normal;
        }

        .title-count {
            position: absolute;
            bottom: -20px;
            right: 0;
            font-size: 13px;
            color: #666;
            transition: color 0.3s;
        }

        .title-count.warning {
            color: #ff9800;
        }

        .title-count.exceed {
            color: #f44336;
        }

        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 6px;
            align-items: center;
        }

        .toolbar button,
        .toolbar select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
        }

        .toolbar button:hover,
        .toolbar select:hover {
            background-color: #f5f5f5;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .content-editor {
            min-height: 350px;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
            line-height: 1.8;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.2s;
            overflow: auto;
        }

        .content-editor:focus-within {
            border-color: #4285f4;
            outline: none;
        }

        .content-editor:empty:before {
            content: attr(data-placeholder);
            color: #aaa;
            display: block;
            /* 让占位符换行显示 */
        }

        /* 空段落占位符 */
        .content-editor p:empty:not(:focus):before {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            overflow: hidden;
        }

        /* 所有段落默认首行缩进2个字符 */
        .content-editor p {
            text-indent: 2em;
            margin: 0 0 1em 0;
        }

        .publish-settings {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            padding: 15px 20px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }

        .publish-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 15px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary {
            background-color: #4285f4;
            color: white;
            box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2);
        }

        .btn-secondary {
            background-color: #f1f3f4;
            color: #333;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn-success {
            background-color: #34a853;
            color: white;
            box-shadow: 0 2px 4px rgba(52, 168, 83, 0.2);
        }

        .btn-danger {
            background-color: #ea4335;
            color: white;
            box-shadow: 0 2px 4px rgba(234, 67, 53, 0.2);
        }

        .btn-cloud {
            background-color: #2e7d32;
            color: white;
            box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
        }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .word-count {
            color: #666;
            font-size: 15px;
        }

        .word-count span {
            font-weight: 600;
            color: #333;
        }

        .preview-content p {
            text-indent: 2em;
            margin: 0 0 0.8em 0;
        }

        /* 保存状态指示器 */
        .save-status {
            margin-left: 15px;
            font-size: 14px;
            color: #666;
            display: none;
        }

        .save-status.saved {
            color: #34a853;
        }

        .save-status.saving {
            color: #4285f4;
        }

        .save-status.cloud-saving {
            color: #2e7d32;
        }

        .save-status.cloud-saved {
            color: #0d47a1;
        }

        /* 移动端适配 */
        @media (max-width: 600px) {
            .publish-actions {
                flex-direction: column;
                gap: 10px;
            }

            .word-count {
                align-self: flex-start;
            }

            .button-group {
                align-self: flex-end;
            }
        }

        /* 新增：自定义提示框样式 */
        .custom-alert {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 24px;
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 200;
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            display: flex;
            align-items: center;
        }

        .custom-alert.show {
            opacity: 1;
        }

        .alert-info {
            background-color: #4285f4;
            color: white;
        }

        .alert-success {
            background-color: #34a853;
            color: white;
        }

        .alert-warning {
            background-color: #ff9800;
            color: white;
        }

        .alert-danger {
            background-color: #f44336;
            color: white;
        }

        .alert-cloud {
            background-color: #2e7d32;
            color: white;
        }

        .custom-alert i {
            margin-right: 8px;
        }

        /* 新增：确认对话框样式 */
        .confirm-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 400;
            align-items: center;
            justify-content: center;
        }

        .dialog-content {
            background-color: #fff;
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .dialog-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }

        .dialog-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .dialog-body {
            padding: 20px;
            min-height: 60px;
        }

        .dialog-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
    </style>
</head>

<body>
    <!-- 自定义提示框 -->
    <div class="custom-alert alert-info" id="customAlert">
        <i class="fa fa-info-circle mr-2"></i>
        <span id="alertMessage">提示信息</span>
    </div>

    <!-- 确认对话框 -->
    <div class="confirm-dialog" id="confirmDialog">
        <div class="dialog-content">
            <div class="dialog-header">
                <div class="dialog-title" id="confirmTitle">确认操作</div>
            </div>
            <div class="dialog-body" id="confirmMessage">
                你确定要执行此操作吗？
            </div>
            <div class="dialog-footer">
                <button class="btn btn-secondary" id="confirmCancel">取消</button>
                <button class="btn btn-primary" id="confirmOK">确定</button>
            </div>
        </div>
    </div>

    <div class="editor-container content-box">
        <!-- 标题框 -->
        <div class="title-container">
            <textarea class="title-input" placeholder="请输入标题" maxlength="20"></textarea>
            <div class="title-count">0/20</div>
        </div>

        <div class="toolbar content-box">
            <select id="fontSizeSelect" onchange="setGlobalFontSize()">
                <option value="">选择字体大小</option>
                <option value="12px">12px</option>
                <option value="14px">14px (默认)</option>
                <option value="16px">16px</option>
                <option value="18px">18px</option>
                <option value="20px">20px</option>
                <option value="24px">24px</option>
                <option value="32px">32px</option>
            </select>
        </div>

        <div class="content-editor" contenteditable="true" data-placeholder="请输入正文"></div>
    </div>

    <!-- 固定在底部的设置 -->
    <div class="publish-settings">
        <div class="publish-actions">
            <div class="word-count">
                <i class="fa fa-file-text-o mr-2"></i>
                <span>字数：</span>
                <span id="wordCount">0</span>
            </div>

            <div class="button-group">
                <button class="btn btn-cloud" id="cloudSaveBtn" disabled>
                    <i class="fa fa-cloud-upload mr-2"></i>云端保存
                </button>
                <button class="btn btn-success" id="saveBtn">
                    <i class="fa fa-save mr-2"></i>保存到本地
                </button>
                <button class="btn btn-primary" id="publishBtn" disabled>
                    <i class="fa fa-upload mr-2"></i>上传
                </button>
                <span class="save-status" id="saveStatus"></span>
            </div>
        </div>
    </div>

    <script>
        // 编辑器相关元素
        const $editor = $('.content-editor');
        const $titleInput = $('.title-input');
        const $titleCount = $('.title-count');
        const $wordCount = $('#wordCount');
        const $publishBtn = $('#publishBtn');
        const $saveBtn = $('#saveBtn');
        const $cloudSaveBtn = $('#cloudSaveBtn');
        const $saveStatus = $('#saveStatus');
        // 自定义提示框和确认对话框元素
        const $customAlert = $('#customAlert');
        const $alertMessage = $('#alertMessage');
        const $confirmDialog = $('#confirmDialog');
        const $confirmTitle = $('#confirmTitle');
        const $confirmMessage = $('#confirmMessage');
        const $confirmOK = $('#confirmOK');
        const $confirmCancel = $('#confirmCancel');

        // 保存状态
        let isSaved = false;
        // 云端保存状态
        let isCloudSaved = false;

        // 接收来自后端的json数据
        // 后端传来的固定书名（示例："现代文学研究"）
        const BOOK_ID = 1; // 这里应该从后端获取，此处作为示例
        const BOOK_NAME = "现代文学研究"; // 这里应该从后端获取，此处作为示例
        // 后端传来的固定章节数据（示例："chapters": 1）
        const BOOK_CHAPTERS = 4; // 这里应该从后端获取，此处作为示例

        // 防抖计时器
        let saveDebounceTimer = null;
        let cloudSaveDebounceTimer = null;
        // 提示框隐藏计时器
        let alertTimer = null;
        // 确认对话框回调
        let confirmCallback = null;

        // 输入法状态标记
        let isComposing = false;
        // 记录输入法开始前的选区状态
        let selectionBeforeComposition = null;

        // 显示自定义提示框
        function showAlert(message, type = 'info') {
            // 清除之前的计时器
            clearTimeout(alertTimer);

            // 设置提示框类型
            $customAlert.attr('class', `custom-alert alert-${type}`);

            // 设置提示消息
            $alertMessage.text(message);

            // 显示提示框
            $customAlert.addClass('show');

            // 3秒后自动隐藏
            alertTimer = setTimeout(() => {
                $customAlert.removeClass('show');
            }, 3000);
        }

        // 显示确认对话框
        function showConfirm(title, message, callback) {
            $confirmTitle.text(title);
            $confirmMessage.text(message);
            confirmCallback = callback;
            $confirmDialog.css('display', 'flex');
        }

        // 确认对话框确认按钮点击事件
        $confirmOK.on('click', () => {
            if (typeof confirmCallback === 'function') {
                confirmCallback(true);
            }
            $confirmDialog.css('display', 'none');
        });

        // 确认对话框取消按钮点击事件
        $confirmCancel.on('click', () => {
            if (typeof confirmCallback === 'function') {
                confirmCallback(false);
            }
            $confirmDialog.css('display', 'none');
        });

        // 点击确认对话框外部关闭
        $confirmDialog.on('click', (e) => {
            if (e.target === $confirmDialog[0]) {
                if (typeof confirmCallback === 'function') {
                    confirmCallback(false);
                }
                $confirmDialog.css('display', 'none');
            }
        });

        // 更新标题字数统计（仅在输入法确认后更新）
        function updateTitleCount() {
            if (isComposing) return; // 输入法正在组合时不更新

            const length = $titleInput.val().length;
            $titleCount.text(`${length}/20`);

            // 根据字数显示不同颜色
            if (length > 16 && length <= 20) {
                $titleCount.addClass('warning').removeClass('exceed');
            } else if (length > 20) {
                $titleCount.addClass('exceed').removeClass('warning');
                // 截断超出部分
                $titleInput.val($titleInput.val().substring(0, 20));
                updateTitleCount();
            } else {
                $titleCount.removeClass('warning exceed');
            }
        }

        // 更新总字数统计和按钮状态（仅在输入法确认后更新）
        function updateWordCount() {
            if (isComposing) return; // 输入法正在组合时不更新

            const titleText = $titleInput.val().replace(/\s/g, '');
            const contentText = $editor.text().replace(/\s/g, '');
            const totalCount = titleText.length + contentText.length;

            $wordCount.text(totalCount);

            // 更新按钮状态
            updateButtonStates();
        }

        // 更新按钮状态
        function updateButtonStates() {
            const titleLength = $titleInput.val().trim().length;
            const contentLength = $editor.text().trim().length;

            // 保存按钮始终可用
            $saveBtn.prop('disabled', false);

            // 云端保存按钮需要标题和内容不为空
            $cloudSaveBtn.prop('disabled', !(titleLength > 0 && contentLength > 0));

            // 上传按钮需要标题和内容都不为空
            $publishBtn.prop('disabled', !(titleLength > 0 && contentLength > 0));

            // 显示保存状态
            updateSaveStatus();
        }

        // 更新保存状态显示
        function updateSaveStatus() {
            const currentContent = $editor.html();
            const currentTitle = $titleInput.val();

            // 检查内容是否有变化
            const hasLocalChanges = currentContent !== getDocumentContent() || currentTitle !== getDocumentTitle();
            const hasCloudChanges = currentContent !== getCloudDocumentContent() || currentTitle !== getCloudDocumentTitle();

            // 如果内容有变化，显示未保存状态
            if (hasLocalChanges) {
                isSaved = false;
                $saveStatus.text('未保存到本地').attr('class', 'save-status').show();
            } else if (hasCloudChanges) {
                isSaved = true;
                isCloudSaved = false;
                $saveStatus.text('已保存到本地，未同步到云端').attr('class', 'save-status').show();
            } else {
                // 如果内容没有变化，显示已保存状态
                if (isSaved) {
                    if (isCloudSaved) {
                        $saveStatus.text('已保存到本地和云端').attr('class', 'save-status cloud-saved').show();
                    } else {
                        $saveStatus.text('已保存到本地').attr('class', 'save-status saved').show();
                    }
                } else {
                    $saveStatus.hide();
                }
            }
        }

        // 获取当前本地文档标题
        function getDocumentTitle() {
            const documentData = getDocumentFromLocalStorage();
            return documentData ? documentData.title : '';
        }

        // 获取当前本地文档内容
        function getDocumentContent() {
            const documentData = getDocumentFromLocalStorage();
            return documentData ? documentData.content : '';
        }

        // 获取当前云端文档标题（模拟从云端获取）
        function getCloudDocumentTitle() {
            const cloudDoc = getCloudDocument();
            return cloudDoc ? cloudDoc.title : '';
        }

        // 获取当前云端文档内容（模拟从云端获取）
        function getCloudDocumentContent() {
            const cloudDoc = getCloudDocument();
            return cloudDoc ? cloudDoc.content : '';
        }

        // 模拟从云端获取文档（实际应用中应调用API）
        function getCloudDocument() {
            const cloudDocumentStr = localStorage.getItem('cloudDocument');
            return cloudDocumentStr ? JSON.parse(cloudDocumentStr) : null;
        }

        // 保存文档到本地
        function saveDocument() {
            const title = $titleInput.val().trim();
            const content = $editor.html();

            // 验证标题
            if (!title) {
                showAlert('请输入文档标题', 'warning');
                return;
            }

            // 显示保存中状态
            $saveStatus.text('保存到本地中...').attr('class', 'save-status saving').show();

            // 准备文档数据
            const documentData = {
                title: title,
                content: content,
                bookName: BOOK_NAME,
                bookId: BOOK_ID,
                chaptersId: BOOK_CHAPTERS,
                // lastSaved: new Date().toISOString() //不用上传时间，java后台会自动更新
            };

            // 保存到localStorage
            saveDocumentToLocalStorage(documentData);

            // 更新状态
            isSaved = true;

            // 显示保存成功
            $saveStatus.text('已保存到本地').attr('class', 'save-status saved');

            // 更新按钮状态
            updateButtonStates();

            // 显示保存成功提示
            showAlert('文档已保存到本地', 'success');

            // 3秒后隐藏保存状态
            setTimeout(() => {
                if (isSaved) {
                    $saveStatus.hide();
                }
            }, 3000);
        }

        // 保存文档到云端（使用AJAX）
        function saveDocumentToCloud() {
            const title = $titleInput.val().trim();
            const content = $editor.html(); // 获取完整HTML内容，包括标签

            // 验证标题
            if (!title) {
                showAlert('请输入文档标题', 'warning');
                return;
            }

            // 验证内容不为空
            if (!content.trim()) {
                showAlert('请输入文档内容', 'warning');
                return;
            }

            // 显示保存中状态
            $saveStatus.text('保存到云端中...').attr('class', 'save-status cloud-saving').show();
            $cloudSaveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i>保存中...');

            // 准备文档数据
            const documentData = {
                title: title,
                content: content, // 完整HTML内容
                bookName: BOOK_NAME,
                bookId: BOOK_ID,
                chapterId: BOOK_CHAPTERS,
                // cloudSaved: new Date().toISOString() //不用上传时间，java后台会自动更新
            };

            // 创建AJAX请求
            $.ajax({
                url: 'insChapters.do',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(documentData),
                success: function (response) {
                    $cloudSaveBtn.prop('disabled', false).html('<i class="fa fa-cloud-upload mr-2"></i>云端保存');

                    try {
                        // 更新本地保存的云端文档信息
                        if (response.success) {
                            // 保存到模拟云端存储（实际应用中应调用API）
                            saveDocumentToCloudStorage(documentData);

                            // 更新状态
                            isCloudSaved = true;

                            // 显示保存成功
                            $saveStatus.text('已保存到本地和云端').attr('class', 'save-status cloud-saved');

                            // 更新按钮状态
                            updateButtonStates();

                            // 显示保存成功提示
                            showAlert('文档已成功保存到云端', 'cloud');

                            // 3秒后隐藏保存状态
                            setTimeout(() => {
                                if (isSaved && isCloudSaved) {
                                    $saveStatus.hide();
                                }
                            }, 3000);
                        } else {
                            showAlert('云端保存失败: ' + response.message, 'danger');
                            $saveStatus.text('云端保存失败').attr('class', 'save-status');
                        }
                    } catch (e) {
                        showAlert('云端保存失败: 解析响应错误', 'danger');
                        $saveStatus.text('云端保存失败').attr('class', 'save-status');
                    }
                },
                error: function (xhr) {
                    $cloudSaveBtn.prop('disabled', false).html('<i class="fa fa-cloud-upload mr-2"></i>云端保存');
                    showAlert('云端保存失败: HTTP错误 ' + xhr.status, 'danger');
                    $saveStatus.text('云端保存失败').attr('class', 'save-status');
                }
            });
        }

        // 保存文档到localStorage（本地保存）
        function saveDocumentToLocalStorage(document) {
            try {
                localStorage.setItem('document', JSON.stringify(document));
                console.log('文档已保存到localStorage');
            } catch (e) {
                console.error('localStorage保存失败:', e);
                showAlert('本地保存失败，请检查浏览器存储权限', 'danger');
            }
        }

        // 保存文档到模拟云端存储（实际应用中应调用API）
        function saveDocumentToCloudStorage(document) {
            localStorage.setItem('cloudDocument', JSON.stringify(document));
        }

        // 从localStorage获取文档
        function getDocumentFromLocalStorage() {
            const documentStr = localStorage.getItem('document');
            return documentStr ? JSON.parse(documentStr) : null;
        }

        // 初始化字数统计
        updateTitleCount();
        updateWordCount();

        // 监听标题输入（使用compositionend确保只在输入法确认后更新）
        $titleInput.on('compositionstart', () => {
            isComposing = true;
        });

        $titleInput.on('compositionend', () => {
            isComposing = false;
            updateTitleCount();
            updateWordCount();
        });

        // 常规输入事件
        $titleInput.on('input', () => {
            if (!isComposing) {
                updateTitleCount();
                updateWordCount();
            }
        });

        // 编辑器内容监听（同样处理输入法）
        $editor.on('compositionstart', () => {
            isComposing = true;
        });

        $editor.on('compositionend', () => {
            isComposing = false;
            updateWordCount();
        });

        $editor.on('input', () => {
            if (!isComposing) {
                updateWordCount();
            }
        });

        // 全局字体大小调整
        function setGlobalFontSize() {
            const size = document.getElementById('fontSizeSelect').value;
            if (size) {
                $editor.css('fontSize', size);
                localStorage.setItem('editorFontSize', size);
            }
        }

        // 页面加载时恢复字体设置和文档内容
        $(window).on('load', () => {
            // 设置当前书名（从后端获取，此处作为示例）
            document.title = `${BOOK_NAME} - 第${BOOK_CHAPTERS}章 - 文档编辑`;

            // 恢复字体设置
            const savedFontSize = localStorage.getItem('editorFontSize');
            if (savedFontSize) {
                $editor.css('fontSize', savedFontSize);
                document.getElementById('fontSizeSelect').value = savedFontSize;
            }

            // 尝试加载上次保存的文档
            const documentData = getDocumentFromLocalStorage();
            if (documentData) {
                $titleInput.val(documentData.title);
                $editor.html(documentData.content);
                isSaved = true;
                showAlert('已恢复上次保存的内容', 'info');
            } else {
                // 初始化编辑器为新建文档状态
                $titleInput.val('');
                $editor.html('');
                isSaved = false;
                showAlert('欢迎使用文档编辑器，本地更改将自动保存', 'info');
            }

            // 检查云端保存状态
            const cloudDoc = getCloudDocument();
            if (cloudDoc) {
                isCloudSaved = true;
            }

            // 确保编辑器初始化时格式正确
            ensureProperFormatting();

            // 更新字数统计和按钮状态
            updateWordCount();

            // 更新保存状态
            updateSaveStatus();
        });

        // 确保编辑器内容始终被p标签包裹，并优化文字添加位置
        function ensureProperFormatting() {
            // 编辑器为空时不处理
            if (!$editor.text().trim()) {
                // 确保编辑器至少有一个空p标签
                if (!$editor.children().length) {
                    $editor.append('<p></p>');
                }
                return;
            }

            // 获取当前选区
            const selection = window.getSelection();
            let currentRange = null;
            if (selection.rangeCount > 0) {
                currentRange = selection.getRangeAt(0).cloneRange();
            }

            // 确保内容以p标签开头
            if (!$editor.children().length || $editor.children().first().prop('tagName') !== 'P') {
                const $p = $('<p></p>');
                $p.append($editor.contents());
                $editor.append($p);
            }

            // 处理换行符转换为p标签
            $editor.find('p').each(function () {
                const $p = $(this);
                $p.contents().each(function () {
                    if (this.nodeType === 3) { // 文本节点
                        const text = this.textContent;
                        const lines = text.split(/\n/);

                        if (lines.length > 1) {
                            const $parent = $(this).parent();
                            $(this).remove();

                            lines.forEach((line, index) => {
                                const $newP = $('<p></p>').text(line);

                                if (index === 0) {
                                    $parent.prepend($newP);
                                } else {
                                    $editor.append($newP);
                                }
                            });
                        }
                    }
                });
            });

            // 恢复选区或设置光标到内容末尾
            if (currentRange) {
                selection.removeAllRanges();
                selection.addRange(currentRange);
            } else {
                setCursorToEnd();
            }
        }

        // 设置光标到内容末尾
        function setCursorToEnd() {
            const selection = window.getSelection();
            const range = document.createRange();

            // 如果编辑器没有子节点，创建一个空p标签
            if (!$editor.children().length) {
                $editor.append('<p></p>');
            }

            // 获取最后一个子元素
            const $lastChild = $editor.children().last();

            // 如果最后一个子元素是p标签
            if ($lastChild.prop('tagName') === 'P') {
                // 如果p标签有内容，将光标放在内容末尾
                if ($lastChild.text()) {
                    range.setStart($lastChild[0], $lastChild[0].childNodes.length);
                } else {
                    // 如果p标签为空，将光标放在p标签内
                    range.setStart($lastChild[0], 0);
                }
            } else {
                // 如果最后一个子元素不是p标签，将光标放在最后一个子元素之后
                range.setStartAfter($lastChild[0]);
            }

            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
            $editor.focus();
        }

        // 保存当前选区状态
        function saveSelection() {
            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                selectionBeforeComposition = selection.getRangeAt(0).cloneRange();
            }
        }

        // 恢复选区状态并调整光标到内容末尾
        function restoreSelection() {
            if (selectionBeforeComposition) {
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(selectionBeforeComposition);
                selectionBeforeComposition = null;
            } else {
                setCursorToEnd();
            }
        }

        // 监听输入法开始事件
        $editor.on('compositionstart', function () {
            isComposing = true;
            saveSelection(); // 保存输入法开始前的选区
        });

        // 监听输入法结束事件（确认输入）
        $editor.on('compositionend', function () {
            isComposing = false;
            ensureProperFormatting(); // 输入法确认后整理格式
            setCursorToEnd(); // 确保光标在内容末尾
        });

        // 监听输入事件，仅在非输入法状态处理格式
        $editor.on('input', function () {
            if (!isComposing) {
                ensureProperFormatting();
                updateSaveStatus();
            }
        });

        // 处理Enter键，创建新段落
        $editor.on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();

                // 只有在输入法没有处于组合状态时才处理
                if (!isComposing) {
                    const selection = window.getSelection();
                    const range = selection.getRangeAt(0);

                    // 获取当前光标所在的节点
                    const parentNode = range.commonAncestorContainer;
                    const parentElement = parentNode.nodeType === 3 ? parentNode.parentNode : parentNode;

                    // 如果父节点不是p标签，将内容包裹在p标签中
                    if (parentElement !== $editor[0] && parentElement.tagName !== 'P') {
                        const $p = $('<p></p>');
                        $(parentElement).replaceWith($p);
                        $p.append(parentElement);
                    }

                    // 创建新的p标签
                    const $newP = $('<p></p>').html('');

                    // 如果当前有选区，分割文本节点
                    if (!range.collapsed) {
                        const selectedText = range.toString();
                        $newP.text(selectedText);
                    }

                    // 将新p标签插入到当前p标签之后
                    const $currentP = $(parentElement.tagName === 'P' ? parentElement : $(parentElement).closest('p'));
                    if ($currentP.next().length) {
                        $currentP.after($newP);
                    } else {
                        $editor.append($newP);
                    }

                    // 设置光标到新段落
                    setCursorToElement($newP);
                }
            }
        });

        // 设置光标到指定元素
        function setCursorToElement(element) {
            const range = document.createRange();
            const selection = window.getSelection();

            // 如果元素有子节点，将光标放在最后一个子节点之后
            if (element[0].childNodes.length > 0) {
                range.setStart(element[0], element[0].childNodes.length);
            } else {
                // 如果元素没有子节点，将光标放在元素内
                range.setStart(element[0], 0);
            }

            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
            $editor.focus();
        }

        // 上传功能
        $publishBtn.on('click', () => {
            if (!isSaved) {
                showConfirm('保存提示', '文档尚未保存到本地，是否先保存再上传？', (confirmed) => {
                    if (confirmed) {
                        saveDocument();
                        $publishBtn.click(); // 再次触发上传按钮
                    }
                });
                return;
            }

            showConfirm('确认上传', '确定要上传这篇文档吗？', (confirmed) => {
                if (confirmed) {
                    showAlert('文档已成功上传！', 'success');
                }
            });
        });

        // 本地保存按钮点击事件
        $saveBtn.on('click', saveDocument);

        // 云端保存按钮点击事件
        $cloudSaveBtn.on('click', saveDocumentToCloud);

        // 自动保存到本地（每10秒）
        setInterval(() => {
            if ($editor.html() !== getDocumentContent() || $titleInput.val() !== getDocumentTitle()) {
                saveDocument();
            }
        }, 10000);


    </script>
</body>

</html>